<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浏览器是如何进行界面渲染的</title>
</head>
<body>
<h2>浏览器是如何进行界面渲染的</h2>
<img src="素材/浏览器界面渲染过程.png" alt="">
<p>
    解析（Parser）HTML，生成DOM树(DOM Tree) <br>
    同时解析（Parser） CSS，生成样式规则 (Style Rules) <br>
    根据DOM树和样式规则，生成渲染树(Render Tree) <br>
    进行布局 Layout(回流/重排):根据生成的渲染树，得到节点的几何信息（位置，大小） <br>
    进行绘制 Painting(重绘): 根据计算和获取的信息进行整个页面的绘制 <br>
    Display: 展示在页面上
</p>
<hr>

<h3>回流(重排)</h3>
<p>
    当 Render Tree 中部分或者全部元素的尺寸、结构、布局等发生改变时 <br>
    浏览器就会重新渲染部分或全部文档的, 过程称为 回流。
</p>

<h3>重绘</h3>
<p>
    由于节点(元素)的样式的改变并不影响它在文档流中的位置和文档布局时 <br>
    (比如：color、background-color、 outline等), 称为 重绘
</p>

<p style="color: red">
    重绘不一定引起回流，而回流一定会引起重绘。
</p>
<hr>

<p>
    会导致回流（重排）的操作： <br>
    页面的首次刷新 <br>
    浏览器的窗口大小发生改变 <br>
    元素的大小或位置发生改变 <br>
    改变字体的大小 <br>
    内容的变化（如：input框的输入，图片的大小） <br>
    激活css伪类 （如：:hover） <br>
    脚本操作DOM（添加或者删除可见的DOM元素） <br>
    简单理解影响到布局了，就会有 回流
</p>
<hr>
<img src="素材/重绘和回流辨别.png" alt="">
</body>
</html>